<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="banner.title"/>
      </el-form-item>

      <el-form-item label="链接地址">
        <el-input v-model="banner.linkUrl"/>
      </el-form-item>

      <el-form-item label="排序">
        <el-input-number v-model="banner.sort" controls-position="right" :min='0'/>
      </el-form-item>

      <!-- banner图 -->
      <el-form-item label="banner图">
        <!-- 缩略图 -->
        <div class="demo-image__preview" style="height: 100px">
          <el-popover
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="banner.imageUrl" :alt="banner.imageUrl" style="max-height: 100px;max-width: 200px">
            <img :src="banner.imageUrl" style="max-width: 1000px"/>
          </el-popover>
        </div>
        <el-upload
          class="upload-demo"
          :action="BASE_API+'/eduoss/fileoss/uploadOssFile'"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="errorHandle"
          multiple>
          <el-button size="small" type="primary" :disabled="uploadBtnDisabled">上传/更换</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过10MB</div>
        </el-upload>

      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import banner from '@/api/cms/banner'
  //export表示可以被别人调用
  export default {
    data(){
      return {
        banner:{
          title:'',
          linkUrl:'',
          sort: 0,
          imageUrl:'https://online-teach-file.oss-cn-beijing.aliyuncs.com/cms/2019/11/14/297acd3b-b592-4cfb-a446-a28310369675.jpg'
        },
        saveBtnDisabled: false, // 保存按钮是否禁用
        uploadBtnDisabled:false,
        BASE_API: process.env.BASE_API
      }
    },
    created(){

    },
    methods: {
      saveOrUpdate() {
        this.saveBtnDisabled = true
        this.saveData()
      },
      // 保存
      saveData() {
        if (this.banner.title==''){
          this.$message({
            type: 'warning',
            message: '请填写banner标题!'
          });
          this.saveBtnDisabled = false
          return
        }
        banner.save(this.banner)
          .then(response => {
            this.$message({
              type: 'success',
              message: '保存成功✔'
            });
            this.$router.push({ path: '/banner/banners' })
          })
          .catch(error =>{
            this.saveBtnDisabled = false
          })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        if (isJPG && isLt2M) {
          this.uploadBtnDisabled= true
          this.saveBtnDisabled= true
        }
        return isJPG && isLt2M
      },
      errorHandle(){
        this.uploadBtnDisabled= false
        this.saveBtnDisabled= false
      },
      //上传成功的方法
      handleAvatarSuccess(response){
        this.uploadBtnDisabled= false
        this.saveBtnDisabled= false
        this.banner.imageUrl = response.data
      },
    }
  }
</script>

<style scoped>

</style>
